<template>
  <div class="computed-home">
    <div class="home-box">
      <div class="map">
        <Map @onload="handleMapLoad" :options="mapOptions" />
      </div>
      <mapBaseLayer @handleChangeTree="changeChecked" />
      <!-- 水文站 -->
      <appMapInfo ref="mapInfoRef" @dialogClose="handleCloseMap" />
      <!-- //水库 -->
      <MapSk ref="mapSkRef" @dialogClose="handleCloseMap" />
      <!-- 河道 -->
      <RiverInfo ref="riverInfoRef" @dialogClose="handleCloseMap" />
      <!-- 小流域 -->
      <BasinInfo ref="basinInfoRef" @dialogClose="handleCloseMap" />
      <!-- 节点 -->
      <NodeInfo ref="nodeInfoRef" @dialogClose="handleCloseMap" />
      <!-- 右侧面板 -->
      <SchemeDetail
        :defaultselect="defaultselect"
        :isShow="isShow"
        v-if="showRightBox"
        :show-add-btn="showAddBtn"
        ref="schemeDetailRef"
      />
      <div class="select-box">
        <SchemeSelect
          :placeholder="state.placeholderOne"
          :define-options="state.optionsOne"
          :images="'u97.png'"
          @changeSelect="handleChangeSelect"
        />
        <div class="mt-4">
          <el-input
            v-model="state.byName"
            placeholder="输入区域/河系"
            class="input-with-select"
            clearable
          >
            <template #append>
              <el-icon @click="handelSearchArea">
                <Search />
              </el-icon>
            </template>
          </el-input>
        </div>
        <SchemeList
          @clickLi="clickLi"
          @handleAdd="handleAdd"
          :images="'u101.png'"
          :title="'计算方案'"
          ref="schemeListRef"
          :data-list="state.dataList"
          :btn-name="state.btnName"
          :show-list="false"
        >
          <div class="ul-box">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChangeTab" stretch>
              <el-tab-pane label="区域" name="first">
                <ul>
                  <li
                    :class="['item-li', currentLi === index ? 'active' : '']"
                    :key="index"
                    v-for="(item, index) in state.areaList"
                    @click="clickLi(item, index)"
                  >
                    <el-tooltip
                      :content="item.calczName"
                      placement="bottom"
                      :disabled="item.calczName?.length < 10"
                    >
                      <span>{{ switchText(item.calczName) }}</span>
                    </el-tooltip>
                    <span class="position-icon">
                      <el-icon @click.stop="handlePositionSec(item, index)">
                        <Position />
                      </el-icon>
                    </span>
                    <!-- 修改区域 -->
                    <span class="edit-icon" @click.stop="handleEditArea(item)">
                      <el-icon>
                        <edit />
                      </el-icon>
                    </span>
                    <span class="close-icon" @click.stop="handleDeleteArea(item)">X</span>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="河系" name="second">
                <ul>
                  <li
                    :class="['item-li', currentLi === index ? 'active' : '']"
                    :key="index"
                    v-for="(item, index) in state.riverList"
                    @click="clickLi(item, index)"
                  >
                    <el-tooltip
                      :content="item.rsysName"
                      placement="bottom"
                      :disabled="item.rsysName?.length < 7"
                    >
                      <span>{{ item.rsysName }}</span>
                    </el-tooltip>
                    <span class="position-icon">
                      <el-icon @click.stop="handlePositionSec(item, index)">
                        <Position />
                      </el-icon>
                    </span>
                    <span class="edit-icon" @click.stop="handleEditRiver(item)">
                      <el-icon>
                        <edit />
                      </el-icon>
                    </span>

                    <span class="close-icon" @click.stop="handleDeleteRiver(item)">X</span>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="流域" name="basin">
                <ul>
                  <li
                    :class="['item-li', currentLi === index ? 'active' : '']"
                    :key="index"
                    v-for="(item, index) in state.basinList"
                    @click="clickLi(item, index)"
                  >
                    <el-tooltip
                      :content="item.basinName"
                      placement="bottom"
                      :disabled="item.basinName?.length < 7"
                    >
                      <span>{{ item.basinName }}</span>
                    </el-tooltip>
                    <!-- <span class="position-icon">
                      <el-icon @click.stop="handlePositionSec(item, index)">
                        <Position />
                      </el-icon>
                    </span> -->
                    <span class="edit-icon" @click.stop="handleEditBasin(item)">
                      <el-icon>
                        <edit />
                      </el-icon>
                    </span>

                    <span class="close-icon" @click.stop="handleDeleteBasin(item)">X</span>
                  </li>
                </ul>
              </el-tab-pane>
            </el-tabs>
          </div>
        </SchemeList>
      </div>
    </div>
  </div>
  <!-- <ViewPublishModel /> -->
  <!-- 新建区域 -->
  <AreaModal ref="areaModalRef" :watershedId="state.watershedId" @closeDialog="closeDig" />
  <!-- 新建河系 -->
  <RiverModal ref="riverModalRef" :watershedId="state.watershedId" @closeRiver="closeRiver" />
  <!-- 新建流域 -->
  <BasinModal ref="basinModalRef" :watershedId="state.watershedId" @closeBasin="closeBasin" />
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
// import sec_info from '@/assets/data/com_data/sec_info.json'
import { useComputeMethods, useSectionInfo } from '@/store/modules/compute-methods.js'
//pinia
import { useUnitInfo, useBlkcd } from '@/store/modules/compute-methods.js'
import Map from '@/components/app-map/map.vue'
import SchemeDetail from './cpns/SchemeDetail/index.vue'
import SchemeSelect from '@/components/app-publicui/scheme-select.vue'
import SchemeList from '@/components/app-publicui/scheme-list.vue'
import SchemeModel from './cpns/SchemeModel/Index.vue'
import mapBaseLayer from '@/components/app-map/mapBaseLayer/index.vue'
//水文
import appMapInfo from '@/components/app-map-info/index.vue'
//水库
import MapSk from '@/components/app-map-popup/index.vue'
//河道
import RiverInfo from '@/components/app-basin-river/river-info/index.vue'
//小流域
import BasinInfo from '@/components/app-basin-river/basin-info/index.vue'
//节点
import NodeInfo from '@/components/app-basin-river/node-info/index.vue'
//接口
import {
  getAreaList,
  deleteArea,
  getRsysList,
  deleteRiver,
  // 获取流域
  getBasinList,
  deleteBasin
} from '@/services/modules/compute-methods'
//查询流域接口
import { getZone } from '@/services/modules/model-config'
// import ViewPublishModel from './cpns/SchemeModel/cpns/ViewPublishModel/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  clearLayer,
  addSecPoints,
  addSecName,
  addTopology,
  addJsUnit,
  addJsUnitNoScheme,
  addRainLayer,
  addWataLayer,
  addRiverLayer,
  addNodeLayer,
  clickMapSection,
  updateJsUnitGraphic,
  changeJsUnitGraphic,
  handleClickJsUnitGraphic,
  updateJsUnitSecGraphic,
  handleClickSecGraphic,
  addTileLayer,
  addDynamicLayerShowAll,
  addBasinVectorTiles,
  removeBasinVectorTiles,
  locatePoint,
  multipolygonToLnglats,
  addTopologyPosition,
  addTopologyOne,
  addGeojsontoFly,
  addCRainFlowtoMap
} from '@/utils/mapUtils'
import {
  SEC_LAYER,
  SEC_NAME_LAYER,
  JS_UNIT_LAYER,
  TOPOLOGY_LAYER,
  RAIN_LAYER,
  WATA_LAYER,
  RIVER_LAYER,
  NODE_LAYER,
  DWH_BASE_LAYER_URL,
  DWH_BASE_LAYER,
  YSH_BASE_LAYER,
  YSH_BASE_LAYER_URL,
  AREA_LAYER,
  MULAREA_LAYER,
  UNIT_SEC_LAYER,
  DWH_SECAREA_LAYER_URL,
  DWH_SECAREA_LAYER,
  YSH_SECAREA_LAYER_URL,
  YSH_SECAREA_LAYER,
  DWH_SKBYUNIT_LAYER_URL,
  DWH_SKBYUNIT_LAYER,
  DWH_XAJUNIT_LAYER_URL,
  DWH_XAJUNIT_LAYER,
  YSH_SKBYUNIT_LAYER_URL,
  YSH_SKBYUNIT_LAYER,
  YSH_XAJUNIT_LAYER_URL,
  YSH_XAJUNIT_LAYER,
  COMPUTMDS_R_RAIN_LAYER,
  COMPUTMDS_R_FLOW_LAYER,
  COMPUTMDS_R_RIVER_LAYER,
  COMPUTMDS_A_RAIN_LAYER,
  COMPUTMDS_A_FLOW_LAYER,
  COMPUTMDS_A_RIVER_LAYER
} from '@/constants'
// 地图JSON 数据
import secData from '@/assets/data/map_data/sec.json'
import jsUnitData from '@/assets/data/map_data/js_unit.json'
import topologyData from '@/assets/data/map_data/topology.json'
import wataData from '@/assets/data/map_data/wata.json'
import riverData from '@/assets/data/map_data/rivl.json'
import nodeData from '@/assets/data/map_data/node.json'
import programme from '@/assets/data/cal_scheme/cal_schemes.json'
import dwhRain from '@/assets/data/map_data/dwhRain.json'
import emitter from '@/utils/bus'
//沂沭河流域json
import yshsecData from '@/assets/data/map_data/yshInfo/sec.json'
import yshjsUnitData from '@/assets/data/map_data/yshInfo/unitdata.json'
import yshtopologyData from '@/assets/data/map_data/yshInfo/topologyData.json'
import yshnodeData from '@/assets/data/map_data/yshInfo/node.json'
import yshRain from '@/assets/data/map_data/yshInfo/yshRain.json'
import { BASE_URL } from '@/services/config'
//新建区域弹框
import AreaModal from './cpns/areaModal/index.vue'
//新建河系弹框
import RiverModal from './cpns/riverModal/index.vue'
// 新建流域弹框
import BasinModal from './cpns/basinModal/index.vue'
// 列表json数据
import cal_schemes from '@/assets/data/cal_scheme/cal_schemes'
import disStatusData from '@/assets/data/dis_schemes/dis_status_5.json'
//api接口
import {
  // getCalculationSchemes,
  addScheme,
  getSchemeSectionStatus,
  getAreaSecList
} from '@/services/modules/compute-methods'
import {
  getCalcZoneSectionGeomList,
  getCalcRsysZoneSectionGeomList,
  getSectionUnitGeom
} from '@/services/modules/map.js'
//地图api
import {
  getPPtnGeomList,
  getSecGeomList,
  getNodeGeomList,
  getTopologyGeomList
} from '@/services/modules/map.js'
const ruleFormRef = ref(null)
const schemeRef = ref(null)
const schemeListRef = ref(null)
const showAddBtn = ref(false)
const showRightBox = ref(true)
const areaModalRef = ref(null)
const riverModalRef = ref(null)
const basinModalRef = ref(null)
const currentLi = ref(null)
const schemeDetailRef = ref(null)
const activeName = ref('first')
const schemeName = ref(null)
const dialogVisible = ref(false)
const checkSec = ref(true)
const checkJsUnit = ref(true)
const checkTopology = ref(true)
const checkWata = ref(true)
const checkRiver = ref(true)
const checkNode = ref(true)
const checkRainSite = ref(true)
const addForm = reactive({})
const rules = {
  schemeName: [{ required: true, message: '请输入方案名称', trigger: 'blur' }],
  endSection: [{ required: true, message: '请选择结束预报断面', trigger: 'blur' }],
  schemeType: [{ required: true, message: '请选择方案类型', trigger: 'blur' }]
}
/**
 * 地图实例
 */
let mapInstance = null
//水文站
const mapInfoRef = ref(null)
//水库
const mapSkRef = ref(null)
//
const basinInfoRef = ref(null)
//
const riverInfoRef = ref(null)
//
const nodeInfoRef = ref(null)
//数据转换
let defaultselect = ref({})
emitter.on('closePage', (value) => {
  showRightBox.value = value
})
const selectedsecStyle = reactive({
  fill: true,
  fillColor: '#1a8e17',
  fillOpacity: 0.6,
  outline: true,
  outlineWidth: 1,
  outlineColor: '#0000FF',
  outlineOpacity: 0.5
})
//区域样式
const areaStyle = reactive({
  // fill: true,
  // // fillColor: '#3388ff',
  // fillColor: 'white',
  // fillOpacity: 1,
  // outline: true,
  // outlineWidth: 3,
  // outlineColor: 'red',
  // outlineOpacity: 0.5
  fill: true,
  fillColor: 'white',
  fillOpacity: 0.5,
  outline: true,
  outlineColor: 'red',
  outlineWidth: 2,
  outlineOpacity: 0.5
})
//河系样式
const riverStyle = reactive({
  fill: true,
  fillColor: 'white',
  fillOpacity: 0.5,
  outline: true,
  outlineColor: 'green',
  outlineWidth: 2,
  outlineOpacity: 1
})
emitter.on('riverModel', (value) => {
  riverModalRef.value.handleOpenModal(value)
})
emitter.on('positionArea', (value) => {
  getCalcZoneSectionGeomList({ zid: value.zid }).then((res) => {
    if (res.code === 200) {
      if (res.data) {
        addGeojsontoFly(mapInstance, res.data, AREA_LAYER, areaStyle)
      }
    }
  })
})
//
emitter.on('fixedPosition', (value) => {
  //查询计算单元坐标信息
  getSectionUnitGeom({ blkcd: value.blkcd }).then((res) => {
    if (res.code === 200) {
      // if (res.data?.geom) {
      //   let arr = multipolygonToLnglats(res.data.geom)
      //   addTopologyOne(mapInstance, arr, UNIT_SEC_LAYER)
      // }
      if (res.data) {
        addGeojsontoFly(mapInstance, res.data, UNIT_SEC_LAYER, selectedsecStyle)
      }
    }
  })
  // updateJsUnitSecGraphic(mapInstance, value.blkcd, JS_UNIT_LAYER)
})
emitter.on('fixedSec', (value) => {
  // handleClickJsUnitGraphic(mapInstance, state.selectedSec, JS_UNIT_LAYER)
  // handleClickSecGraphic(mapInstance, value, JS_UNIT_LAYER)
})
emitter.on('mapArea', (value) => {
  // changeJsUnitGraphic(mapInstance, disStatusData, JS_UNIT_LAYER)
  // handleClickJsUnitGraphic(mapInstance, value, JS_UNIT_LAYER)
  // state.selectedSec = value
})
emitter.on('changeRightBox', (value) => {
  isShow.value = value
})
emitter.on('resetSection', (value) => {
  getSchemeSectionStatus({
    schemeCode: useComputeMethods().schemeInfo.schemeCode,
    blkcd: useComputeMethods().schemeInfo.endSection
  }).then((res) => {
    if (res.code === 200) {
      updateJsUnitGraphic(mapInstance, res.data, JS_UNIT_LAYER)

      // 点击计算单元
      clickMapSection(mapInstance, res.data, JS_UNIT_LAYER)
    }
  })
})

//地图获取雨量站
function PPtnGeomList() {
  return new Promise((resolve, reject) => {
    getPPtnGeomList({ zoneId: state.watershedId }).then((res) => {
      if (res.code === 200) {
        state.pptn = res.data
        resolve(state.pptn)
      }
    })
  })
}
//地图获取预报对象
function SecGeomList() {
  return new Promise((resolve, reject) => {
    getSecGeomList({ zoneId: state.watershedId }).then((res) => {
      if (res.code === 200) {
        state.secGeoData = res.data
        resolve(state.secGeoData)
      }
    })
  })
}
//地图获取节点
function NodeGeomList() {
  return new Promise((resolve, reject) => {
    getNodeGeomList({ zoneId: state.watershedId }).then((res) => {
      if (res.code === 200) {
        state.nodeGeoData = res.data
        resolve(state.nodeGeoData)
      }
    })
  })
}
//地图获取拓扑线
function TopologyGeomList() {
  return new Promise((resolve, reject) => {
    getTopologyGeomList({ zoneId: state.watershedId }).then((res) => {
      if (res.code === 200) {
        state.topologyGeoData = res.data
        resolve(state.topologyGeoData)
      }
    })
  })
}
// 文字数量超过之后隐藏
function switchText(name) {
  if (name.length > 10) {
    return name.slice(0, 10) + '...'
  } else {
    return name
  }
}
onMounted(async () => {
  await getZoneList()
  //  initData()
  changeInitData()
  useUnitInfo().$reset()
  useBlkcd().$reset()
})
function touchClick() {
  schemeListRef.value.clickLi(state.dataList[state.dataList.length - 1], state.dataList.length - 1)
}
function handleCloseMap() {
  useUnitInfo().$reset()
  // useBlkcd().$reset()
}
//订阅
const subscribe = useUnitInfo().$subscribe(
  (mutation, state) => {
    console.log(state)
    if (state.unitShow == true && useBlkcd().status == 2) {
      mapInfoRef.value.openMapInfo({
        blkcd: useBlkcd().blkcd,
        blknm: useBlkcd().blknm,
        id: useBlkcd().ccid,
        areaRiver: activeName.value
      })
    } else if (state.unitShow == true && useBlkcd().status == 1) {
      mapSkRef.value.openMapSk({
        blkcd: useBlkcd().blkcd,
        blknm: useBlkcd().blknm,
        ccid: useBlkcd().ccid,
        schemeType: activeName.value
      })
    } else if (state.unitShow == true && useBlkcd().blknm == 'rvcd') {
      riverInfoRef.value.openMapInfo({
        blkcd: useBlkcd().blkcd,
        blknm: useBlkcd().blknm
      })
    } else if (state.unitShow == true && useBlkcd().blknm == 'wscd') {
      basinInfoRef.value.openMapInfo({
        blkcd: useBlkcd().blkcd,
        blknm: useBlkcd().blknm
      })
    } else if (state.unitShow == true && useBlkcd().blknm == 'NDCD') {
      nodeInfoRef.value.openMapInfo({
        blkcd: useBlkcd().blkcd,
        blknm: useBlkcd().blknm
      })
    }
  },
  { detached: false }
)
//选择流域
async function handleChangeSelect(item, val) {
  state.watershedId = item
  state.areaList = []
  state.riverList = []
  state.basinList = []
  handleChangeTab(activeName.value)
  // initData()
  // rsysList()
  // basinList()
  await PPtnGeomList()
  await SecGeomList()
  await NodeGeomList()
  await TopologyGeomList()
  clearLayer(mapInstance, SEC_LAYER)
  clearLayer(mapInstance, SEC_NAME_LAYER)
  clearLayer(mapInstance, JS_UNIT_LAYER)
  clearLayer(mapInstance, TOPOLOGY_LAYER)
  clearLayer(mapInstance, NODE_LAYER)
  clearLayer(mapInstance, WATA_LAYER)
  clearLayer(mapInstance, RIVER_LAYER)
  clearLayer(mapInstance, NODE_LAYER)
  clearLayer(mapInstance, RAIN_LAYER)
  removeBasinVectorTiles(mapInstance, DWH_SECAREA_LAYER)
  removeBasinVectorTiles(mapInstance, YSH_SECAREA_LAYER)
  removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
  removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)

  let map = mapInstance
  if (item == 2) {
    // //添加计算单元
    // addJsUnit(mapInstance, yshjsUnitData, JS_UNIT_LAYER)
    // addJsUnitNoScheme(mapInstance, yshjsUnitData, JS_UNIT_LAYER)
    //   changeJsUnitGraphic(mapInstance, disStatusData, JS_UNIT_LAYER)
    //添加拓扑线
    addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    // 添加断面点
    addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
    // 添加断面名称
    addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)

    // //添加节点
    addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)

    //添加雨量站
    addRainLayer(map, state.pptn, RAIN_LAYER)
    addBasinVectorTiles(mapInstance, YSH_SECAREA_LAYER_URL, YSH_SECAREA_LAYER, secAreaStyle)
    addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, baselayerStyle)

    locatePoint(mapInstance, 118.379657, 35.018398, 10)
  } else {
    // 添加小流域
    // addWataLayer(map, wataData, WATA_LAYER)
    // //添加计算单元
    // addJsUnitNoScheme(map, jsUnitData, JS_UNIT_LAYER)
    //    //计算单元
    // changeJsUnitGraphic(mapInstance, disStatusData, JS_UNIT_LAYER)
    // 添加河道
    // addRiverLayer(map, riverData, RIVER_LAYER)
    // 添加节点
    addBasinVectorTiles(mapInstance, DWH_SECAREA_LAYER_URL, DWH_SECAREA_LAYER, secAreaStyle)
    addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
    // 添加断面点
    addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
    // 添加断面名称
    addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)

    // 添加拓扑线
    addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)

    addBasinVectorTiles(map, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
    //添加雨量站
    addRainLayer(map, state.pptn, RAIN_LAYER)

    locatePoint(mapInstance, 117.1775, 36.06469, 10)
  }
}
//新建区域后
function closeDig() {
  initData()
}
//新建河系后
function closeRiver() {
  rsysList()
}
//新建流域后
function closeBasin() {
  basinList()
}
// 修改区域
function handleEditArea(item) {
  areaModalRef.value.handleOpenModal(item)
  // console.log(item, 5200)
}
//删除区域
function handleDeleteArea(item) {
  ElMessageBox.confirm(`是否删除${item.calczName}`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteArea({ id: item.id }).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.msg)
          initData()
        }
      })
    })
    .catch(() => {})
}
//删除河系
function handleDeleteRiver(item) {
  ElMessageBox.confirm(`是否删除${item.rsysName}`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteRiver({ id: item.id }).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.msg)
          rsysList()
        }
      })
    })
    .catch(() => {})
}
// 删除流域
const handleDeleteBasin = (item) => {
  ElMessageBox.confirm(`是否删除${item.basinName}`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteBasin({ id: item.id }).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.msg)
          basinList()
        }
      })
    })
    .catch(() => {})
}
// 获取河系
function rsysList(name) {
  getRsysList({ zoneId: state.watershedId, rsysName: name ? name : '' }).then((res) => {
    if (res.code === 200) {
      state.riverList = res.data
      clickLi(res.data[0], 0)
    }
  })
}
// 获取流域列表
function basinList(name) {
  getBasinList({ zoneId: state.watershedId }).then((res) => {
    if (res.code === 200) {
      state.basinList = res.data
      clickLi(res.data[0], 0)
    }
  })
}
function handleChangeTab(val) {
  // 切换河系或者区域时 将检索框的内容清空
  state.byName = ''
  activeName.value = val
  if (val == 'first') {
    state.btnName = '新建区域'
    initData()
  } else if (val == 'second') {
    state.btnName = '新建河系'
    rsysList()
  } else if (val == 'basin') {
    state.btnName = '新建流域'
    basinList()
  }
}
//获取预报断面
function getSecList(id) {
  return new Promise((resolve, reject) => {
    getAreaSecList({ zid: id }).then((res) => {
      if (res.code === 200) {
        state.selectedSec = res.data
        resolve(state.selectedSec)
      }
    })
  })
}
function getZoneList() {
  return new Promise((resolve, reject) => {
    getZone().then((res) => {
      if (res.code === 200) {
        state.optionsOne = res.data
        handleChangeSelect(state.optionsOne[0].id, 0)
      }
    })
    resolve(state.optionsOne)
  })
}
function initData(name) {
  getAreaList({ zoneId: state.watershedId, calczName: name ? name : '' }).then((res) => {
    if (res.code === 200) {
      state.areaList = res.data
      clickLi(res.data[0], 0)
    }
  })
  // return new Promise((resolve, reject) => {
  //   state.sectionArr = sec_info.map((item) => ({
  //     title: item.blknm,
  //     id: item.blkcd
  //   }))
  //   // getCalculationSchemes().then((res) => {
  //   //   if (res.code === 200) {
  //   //     state.dataList = res.data.map((item) => ({
  //   //       title: item.schemeName,
  //   //       id: item.schemeCode,
  //   //       ...item
  //   //     }))
  //   //     resolve(state.dataList)
  //   //   }
  //   // })
  // })
}
function handleEditRiver(item) {
  riverModalRef.value.handleOpenModal(item)
}
// 流域详情弹框
function handleEditBasin(item) {
  basinModalRef.value.handleOpenModal(item)
}
function changeInitData() {
  state.riverArr = state.dataList.filter((item) => {
    return item.schemeType == 1
  })
  state.aloneArr = state.dataList.filter((item) => {
    return item.schemeType == 0
  })
}
const handlePositionSec = (item, index) => {
  removeBasinVectorTiles(mapInstance, MULAREA_LAYER)
  removeBasinVectorTiles(mapInstance, AREA_LAYER)
  removeBasinVectorTiles(mapInstance, UNIT_SEC_LAYER)
  if (state.btnName == '新建区域') {
    // await getSecList(item.id)
    getCalcZoneSectionGeomList({ zid: item.id }).then((res) => {
      if (res.code === 200) {
        if (res.data) {
          addGeojsontoFly(mapInstance, res.data, AREA_LAYER, areaStyle)
        }
      }
    })
    console.log('区域')
    // changeJsUnitGraphic(mapInstance, disStatusData, JS_UNIT_LAYER)
    // handleClickJsUnitGraphic(mapInstance, state.selectedSec, JS_UNIT_LAYER)
  } else if (state.btnName == '新建河系') {
    // changeJsUnitGraphic(mapInstance, disStatusData, JS_UNIT_LAYER)
    getCalcRsysZoneSectionGeomList({ rsid: item.id }).then((res) => {
      if (res.code === 200) {
        if (res.data) {
          addGeojsontoFly(mapInstance, res.data, MULAREA_LAYER, riverStyle)
        }
      }
    })
  } else if (state.btnName == '新建流域') {
    // changeJsUnitGraphic(mapInstance, disStatusData, JS_UNIT_LAYER)
    // getCalcRsysZoneSectionGeomList({ rsid: item.id }).then((res) => {
    //   if (res.code === 200) {
    //     if (res.data) {
    //       addGeojsontoFly(mapInstance, res.data, MULAREA_LAYER, riverStyle)
    //     }
    //   }
    // })
  }
}
const clickLi = async (item, index) => {
  state.schemeId = item.id
  // removeBasinVectorTiles(mapInstance, MULAREA_LAYER)
  // removeBasinVectorTiles(mapInstance, AREA_LAYER)
  // removeBasinVectorTiles(mapInstance, UNIT_SEC_LAYER)

  item = { ...item, btnName: state.btnName }
  currentLi.value = index
  defaultselect.value = JSON.parse(JSON.stringify(item))
  nextTick(() => {
    emitter.emit('clickArea', defaultselect.value)
  })
  // item.schemeType = item.schemeType.toString()

  // let { schemeInfo } = storeToRefs(useComputeMethods())
  // let { sectionInfo } = storeToRefs(useSectionInfo())
  // sectionInfo.value = []
  // schemeInfo.value = { schemeCode: item.schemeCode, endSection: item.endSection }
  // let section = []
  // await getSchemeSectionStatus({
  //   schemeCode: item.schemeCode,
  //   blkcd: item.endSection
  // }).then((res) => {
  //   if (res.code === 200) {
  //     section = res.data
  //   }
  // })
  // 点击计算方案打开右侧弹窗
  showRightBox.value = true
  isShow.value = false

  showAddBtn.value = false

  // schemeDetailRef.value.changeBtn(false)

  // await updateJsUnitGraphic(mapInstance, section, JS_UNIT_LAYER)
  // // 点击计算单元
  // await clickMapSection(mapInstance, section, JS_UNIT_LAYER)
}
const isShow = ref(true)
const tabActiveName = ref('first')
// 地图河道小流域
const baselayerStyle = reactive({
  //小流域
  wata: {
    weight: 0.8,
    fillOpacity: 0.6,
    fillColor: '#FFFF00',
    color: '#FFFF00',
    fill: false
  },
  //河道
  rivl: {
    weight: 1,
    color: '#00BFFF'
  }
})
//预报断面区域矢量切片图层样式
const secAreaStyle = reactive({
  skby: {
    weight: 0.3,
    fillOpacity: 1,
    fillColor: '#9eada1',
    color: 'red',
    fill: true
  }
})
//新安江 style
const xajUnitStyle = reactive({
  xaj: {
    weight: 0.3,
    // fillOpacity: 0.6,
    fillColor: 'green',
    color: 'red',
    fill: false
  }
})
//时空变源style
const skbyUnitStyle = reactive({
  skby: {
    weight: 0.3,
    // fillOpacity: 0.6,
    fillColor: 'red',
    color: 'yellow',
    fill: false
  }
})
//地图小流域
const basinLayerStyle = reactive({
  //小流域
  wata: {
    weight: 0.8,
    fillOpacity: 0.6,
    fillColor: '#FFFF00',
    color: '#FFFF00',
    fill: false
  },
  //河道
  rivl: {
    weight: 1,
    color: '#00BFFF',
    opacity: 0
  }
  //水动力
  // ？？？
})
const riverLayerStyle = reactive({
  //小流域
  wata: {
    weight: 0.8,
    fillOpacity: 0.6,
    fillColor: '#FFFF00',
    color: '#FFFF00',
    fill: false
  },
  //河道
  rivl: {
    weight: 1,
    color: '#00BFFF'
  }
  //水动力
  // ？？？
})
//
const mapOptions = { crs: 'EPSG:4490', basemaps: [] }
const state = reactive({
  byName: '',
  pptn: {},
  secGeoData: {},
  nodeGeoData: {},
  topologyGeoData: {},
  schemeId: '',
  //单选值
  radioValue: '0',
  watershedId: 1,
  selectedSec: [],
  btnName: '新建区域',
  areaList: [],
  riverList: [
    // { id: 1, title: '大汶河' },
    // { id: 2, title: '北望新安江' },
    // { id: 3, title: '楼德' }
  ],
  basinList: [
    { id: 1, calczName: '大汶河' },
    { id: 2, calczName: '北望新安江' },
    { id: 3, calczName: '楼德' }
  ],
  riverArr: [],
  aloneArr: [],
  sectionArr: [],
  checkList: [],
  dataList: [
    {
      title: '大汶河优选方案',
      id: 1
    },
    {
      title: '大汶河新安江二维方案',
      id: 2
    },
    {
      title: '大汶河时空变源二维方案',
      id: 3
    }
  ],
  placeholder: '大汶河优选方案',
  placeholderOne: '请选择',
  optionsOne: [],
  options: [
    {
      value: '1',
      label: 'label'
    },
    {
      value: '2',
      label: 'label2'
    }
  ]
})
// 用于检索河系或区域
function handelSearchArea() {
  if (activeName.value == 'first') {
    // 检索区域
    initData(state.byName)
  } else if (activeName.value == 'second') {
    // 河系

    rsysList(state.byName)
  } else if (activeName.value == 'basin') {
    // 流域

    basinList(state.byName)
  }
}

//保存
// function handleSave() {
//   ruleFormRef.value.validate(async (valid) => {
//     if (valid) {
//       dialogVisible.value = false
//       isShow.value = true
//       showRightBox.value = true
//       //
//       addScheme({ ...addForm }).then(async (res) => {
//         if (res.code === 200) {
//           await initData()
//           touchClick()
//           schemeDetailRef.value.changeBtn(true)
//           showAddBtn.value = true
//           ruleFormRef.value.resetFields()
//         }
//       })
//     } else {
//       return
//     }
//   })
// }
//新建河系计算方案
function handleAdd() {
  if (state.btnName == '新建区域') {
    areaModalRef.value.handleOpenModal()
  } else if (state.btnName == '新建河系') {
    riverModalRef.value.handleOpenModal()
  } else if (state.btnName == '新建流域') {
    basinModalRef.value.handleOpenModal({})
  }
}
//保存并发布
// function savePublish() {
//   state.showHome = true
// }

/**
 * 地图实例完成后的调用函数
 */
const handleMapLoad = ({ map }) => {
  setTimeout(async () => {
    mapInstance = map
    await PPtnGeomList()
    await SecGeomList()
    await NodeGeomList()
    await TopologyGeomList()
    const layerUrlS = mapUrl
    // const layerUrlS =
    //   'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/Shandong_SDDOM/MapServer'
    addTileLayer(mapInstance, layerUrlS, 0, 74, '山东底图')
    addDynamicLayerShowAll(
      mapInstance,
      'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/L1_Liuyujie/MapServer',
      12,
      11,
      '流域界'
    )
    addDynamicLayerShowAll(
      mapInstance,
      'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/Shandong_XZHQ/MapServer',
      26,
      32,
      '蓄滞洪区'
    )

    // // 添加小流域
    // addWataLayer(map, wataData, WATA_LAYER)
    //添加计算单元
    // addJsUnitNoScheme(map, jsUnitData, JS_UNIT_LAYER)
    //计算单元
    // changeJsUnitGraphic(mapInstance, disStatusData, JS_UNIT_LAYER)
    // 添加断面点
    addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
    // 添加断面名称
    addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)

    // 添加拓扑线
    addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    addBasinVectorTiles(map, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
    // // 添加河道
    // addRiverLayer(map, riverData, RIVER_LAYER)
    // 添加节点
    addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
    addBasinVectorTiles(mapInstance, DWH_SECAREA_LAYER_URL, DWH_SECAREA_LAYER, secAreaStyle)
  }, 100)
}

const changeChecked = ({ event, item }) => {
  //   removeBasinVectorTiles(mapInstance,DWH_SECAREA_LAYER)
  // removeBasinVectorTiles(mapInstance,YSH_SECAREA_LAYER)
  //被选中的值
  console.log(event + ':' + item, 888)
  switch (item) {
    case 'sec':
      if (event) {
        console.log(state.secGeoData.features, state.watershedId, '断面')
        if (state.watershedId == 1) {
          // 添加断面
          addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
          // 添加断面名称
          addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
        } else if (state.watershedId == 2) {
          // 添加断面点
          addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
          // 添加断面名称
          addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
        }
      } else {
        clearLayer(mapInstance, SEC_LAYER)
        clearLayer(mapInstance, SEC_NAME_LAYER)
      }
      break
    case 'jsUnitSk':
      if (event) {
        if (state.watershedId == 1) {
          //添加预报单元
          addBasinVectorTiles(
            window.mapInstance,
            DWH_SKBYUNIT_LAYER_URL,
            DWH_SKBYUNIT_LAYER,
            skbyUnitStyle
          )
          // //添加计算单元
          // addJsUnit(window.mapInstance, jsUnitData, JS_UNIT_LAYER)
        } else if (state.watershedId == 2) {
          // // //添加计算单元
          // addJsUnit(window.mapInstance, yshjsUnitData, JS_UNIT_LAYER)
          addBasinVectorTiles(
            window.mapInstance,
            YSH_SKBYUNIT_LAYER_URL,
            YSH_SKBYUNIT_LAYER,
            skbyUnitStyle
          )
        }
      } else {
        removeBasinVectorTiles(window.mapInstance, DWH_SKBYUNIT_LAYER)
        removeBasinVectorTiles(window.mapInstance, YSH_SKBYUNIT_LAYER)
      }
      break
    case 'jsUnitXaj':
      if (event) {
        if (state.watershedId == 1) {
          //添加预报单元
          addBasinVectorTiles(
            window.mapInstance,
            DWH_XAJUNIT_LAYER_URL,
            DWH_XAJUNIT_LAYER,
            xajUnitStyle
          )
          // //添加计算单元
          // addJsUnit(window.mapInstance, jsUnitData, JS_UNIT_LAYER)
        } else if (state.watershedId == 2) {
          // // //添加计算单元
          // addJsUnit(window.mapInstance, yshjsUnitData, JS_UNIT_LAYER)
          addBasinVectorTiles(
            window.mapInstance,
            YSH_XAJUNIT_LAYER_URL,
            YSH_XAJUNIT_LAYER,
            xajUnitStyle
          )
        }
      } else {
        removeBasinVectorTiles(window.mapInstance, DWH_XAJUNIT_LAYER)
        removeBasinVectorTiles(window.mapInstance, YSH_XAJUNIT_LAYER)
      }
      break
    case 'topology':
      if (event) {
        if (state.watershedId == 1) {
          //添加拓扑线
          addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
        } else if (state.watershedId == 2) {
          //添加拓扑线
          addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
        }
      } else {
        clearLayer(mapInstance, TOPOLOGY_LAYER)
      }
      break
    case 'river':
      if (event) {
        if (state.watershedId == 1) {
          //添加小流域
          // addWataLayer(mapInstance, wataData, WATA_LAYER)
          removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
          addBasinVectorTiles(mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, riverLayerStyle)
        } else if (state.watershedId == 2) {
          removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
          addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, riverLayerStyle)
        }
        // //添加河道
        // addRiverLayer(mapInstance, riverData, RIVER_LAYER)
      } else {
        if (state.watershedId == 1) {
          // clearLayer(mapInstance, RIVER_LAYER)
          removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
          // addBasinVectorTiles(mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, basinLayerStyle)
        } else if (state.watershedId == 2) {
          // clearLayer(mapInstance, RIVER_LAYER)
          removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
          // addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, basinLayerStyle)
        }
      }
      break
    case 'node':
      if (event) {
        if (state.watershedId == 1) {
          //添加节点
          addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
        } else if (state.watershedId == 2) {
          // //添加节点
          addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
        }
      } else {
        clearLayer(mapInstance, NODE_LAYER)
      }
      break
    case 'rainSite':
      if (event) {
        addRainLayer(map, state.pptn, RAIN_LAYER)
      } else {
        clearLayer(mapInstance, RAIN_LAYER)
      }
      break
    default:
      break
  }
  // if (checkWata.value && checkRiver.value) {
  //   if (state.watershedId == 1) {
  //     removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
  //     addBasinVectorTiles(mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
  //   } else if (state.watershedId == 2) {
  //     removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
  //     addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, baselayerStyle)
  //   }
  // }
  // if (!checkWata.value && !checkRiver.value) {
  //   if (state.watershedId == 1) {
  //     removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
  //   } else if (state.watershedId == 2) {
  //     removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
  //   }
  // }
}

//单选
// function handleChangeRadio(val) {
//   removeBasinVectorTiles(mapInstance, COMPUTMDS_R_RAIN_LAYER)
//   removeBasinVectorTiles(mapInstance, COMPUTMDS_R_FLOW_LAYER)
//   removeBasinVectorTiles(mapInstance, COMPUTMDS_R_RIVER_LAYER)
//   removeBasinVectorTiles(mapInstance, COMPUTMDS_A_RAIN_LAYER)
//   removeBasinVectorTiles(mapInstance, COMPUTMDS_A_FLOW_LAYER)
//   removeBasinVectorTiles(mapInstance, COMPUTMDS_A_RIVER_LAYER)
//   if (state.btnName == '新建区域') {
//     if (val == 1) {
//       addBasinVectorTiles(
//         mapInstance,
//         BASE_URL + `/map/vectorTiles/zoneSelection/${state.schemeId}/{z}/{x}/{y}`,
//         COMPUTMDS_A_RAIN_LAYER,
//         {
//           zone: (properties) => {
//             var color
//             //fcmxqtype 雨量1到7   pavtype洪峰流量1-6
//             if (properties.fcmxqtype == 1) {
//               color = 'rgb(174, 174, 174)'
//             } else if (properties.fcmxqtype == 2) {
//               color = 'rgb(167, 240, 143)'
//             } else if (properties.fcmxqtype == 3) {
//               color = 'rgb(62, 184, 62)'
//             } else if (properties.fcmxqtype == 4) {
//               color = 'rgb(98, 183, 255)'
//             } else if (properties.fcmxqtype == 5) {
//               color = 'rgb(0, 0, 253)'
//             } else if (properties.fcmxqtype == 6) {
//               color = 'rgb(249, 1, 249)'
//             } else if (properties.fcmxqtype == 7) {
//               color = 'rgb(127, 1, 64)'
//             }
//             return {
//               weight: 1,
//               fillOpacity: 0.6,
//               fillColor: color,
//               color: 'black',
//               fill: true
//             }
//           }
//         }
//       )
//     } else if (val == 2) {
//       addBasinVectorTiles(
//         mapInstance,
//         BASE_URL + `/map/vectorTiles/zoneSelection/${state.schemeId}/{z}/{x}/{y}`,
//         COMPUTMDS_A_FLOW_LAYER,
//         {
//           zone: (properties) => {
//             var color
//             //fcmxqtype 雨量1到7   pavtype洪峰流量1-6
//             if (properties.fcmxqtype == 1) {
//               color = 'rgb(174, 174, 174)'
//             } else if (properties.fcmxqtype == 2) {
//               color = 'rgb(167, 240, 143)'
//             } else if (properties.fcmxqtype == 3) {
//               color = 'rgb(62, 184, 62)'
//             } else if (properties.fcmxqtype == 4) {
//               color = 'rgb(98, 183, 255)'
//             } else if (properties.fcmxqtype == 5) {
//               color = 'rgb(0, 0, 253)'
//             } else if (properties.fcmxqtype == 6) {
//               color = 'rgb(249, 1, 249)'
//             }
//             return {
//               weight: 1,
//               fillOpacity: 0.6,
//               fillColor: color,
//               color: 'black',
//               fill: true
//             }
//           }
//         }
//       )
//     } else if (val == 3) {
//       addCRainFlowtoMap(
//         mapInstance,
//         BASE_URL + `/map/vectorTiles/zoneRivel/${state.schemeId}/{z}/{x}/{y}`,
//         COMPUTMDS_A_RIVER_LAYER,
//         {
//           zone: (properties) => {
//             var color
//             if (properties.maxflowtype == 1) {
//               color = 'rgb(174, 174, 174)'
//             } else if (properties.maxflowtype == 2) {
//               color = 'rgb(167, 240, 143)'
//             } else if (properties.maxflowtype == 3) {
//               color = 'rgb(62, 184, 62)'
//             } else if (properties.maxflowtype == 4) {
//               color = 'rgb(98, 183, 255)'
//             } else if (properties.maxflowtype == 5) {
//               color = 'rgb(0, 0, 253)'
//             } else if (properties.maxflowtype == 6) {
//               color = 'rgb(249, 1, 249)'
//             }
//             return {
//               weight: 1,
//               color: color
//             }
//           }
//         }
//       )
//     } else {
//     }
//   } else {
//     if (val == 1) {
//       addBasinVectorTiles(
//         mapInstance,
//         BASE_URL + `/map/vectorTiles/rsysSelection/${state.schemeId}/{z}/{x}/{y}`,
//         COMPUTMDS_R_RAIN_LAYER,
//         {
//           rsys: (properties) => {
//             var color
//             //fcmxqtype 雨量1到7   pavtype洪峰流量1-6
//             if (properties.fcmxqtype == 1) {
//               color = 'rgb(174, 174, 174)'
//             } else if (properties.fcmxqtype == 2) {
//               color = 'rgb(167, 240, 143)'
//             } else if (properties.fcmxqtype == 3) {
//               color = 'rgb(62, 184, 62)'
//             } else if (properties.fcmxqtype == 4) {
//               color = 'rgb(98, 183, 255)'
//             } else if (properties.fcmxqtype == 5) {
//               color = 'rgb(0, 0, 253)'
//             } else if (properties.fcmxqtype == 6) {
//               color = 'rgb(249, 1, 249)'
//             } else if (properties.fcmxqtype == 7) {
//               color = 'rgb(127, 1, 64)'
//             }
//             return {
//               weight: 1,
//               fillOpacity: 0.6,
//               fillColor: color,
//               color: 'black',
//               fill: true
//             }
//           }
//         }
//       )
//     } else if (val == 2) {
//       addBasinVectorTiles(
//         mapInstance,
//         BASE_URL + `/map/vectorTiles/rsysSelection/${state.schemeId}/{z}/{x}/{y}`,
//         COMPUTMDS_R_FLOW_LAYER,
//         {
//           rsys: (properties) => {
//             var color
//             //fcmxqtype 雨量1到7   pavtype洪峰流量1-6
//             if (properties.fcmxqtype == 1) {
//               color = 'rgb(174, 174, 174)'
//             } else if (properties.fcmxqtype == 2) {
//               color = 'rgb(167, 240, 143)'
//             } else if (properties.fcmxqtype == 3) {
//               color = 'rgb(62, 184, 62)'
//             } else if (properties.fcmxqtype == 4) {
//               color = 'rgb(98, 183, 255)'
//             } else if (properties.fcmxqtype == 5) {
//               color = 'rgb(0, 0, 253)'
//             } else if (properties.fcmxqtype == 6) {
//               color = 'rgb(249, 1, 249)'
//             }
//             return {
//               weight: 1,
//               fillOpacity: 0.6,
//               fillColor: color,
//               color: 'black',
//               fill: true
//             }
//           }
//         }
//       )
//     } else if (val == 3) {
//       addBasinVectorTiles(
//         mapInstance,
//         BASE_URL + `/map/vectorTiles/rsysRivel/${state.schemeId}/{z}/{x}/{y}`,
//         COMPUTMDS_R_RIVER_LAYER,
//         {
//           rsys: (properties) => {
//             var color
//             if (properties.maxflowtype == 1) {
//               color = 'rgb(174, 174, 174)'
//             } else if (properties.maxflowtype == 2) {
//               color = 'rgb(167, 240, 143)'
//             } else if (properties.maxflowtype == 3) {
//               color = 'rgb(62, 184, 62)'
//             } else if (properties.maxflowtype == 4) {
//               color = 'rgb(98, 183, 255)'
//             } else if (properties.maxflowtype == 5) {
//               color = 'rgb(0, 0, 253)'
//             } else if (properties.maxflowtype == 6) {
//               color = 'rgb(249, 1, 249)'
//             }
//             return {
//               weight: 1,
//               color: color
//             }
//           }
//         }
//       )
//     } else {
//     }
//   }
// }
</script>

<style lang="less" scoped>
.el-row {
  height: 30px;
}
.computed-home {
  width: 100%;
  height: 100%;
  background-color: #ffffff;

  .home-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .map {
      position: relative;
      width: 100%;
      height: 100%;
      background-color: #f5f5f5;
    }
    .select-box {
      position: absolute;
      top: 20px;
      left: 30px;
      .mt-4 {
        // margin-top: 10px;
        margin-bottom: 5px;
        border: 1px solid #149bd5;
        border-radius: 5px;
      }
      .ul-box {
        :deep(.el-tabs__item) {
          color: white;
        }
        // :deep(.el-tabs__item:hover) {
        //   color: #00d3e9;
        // }
        // :deep(.el-tabs__item.is-active) {
        //   color: #00d3e9;
        // }
        ul {
          height: 200px;
          overflow-y: auto;
          font-size: 14px;
          .item-li {
            display: flex;
            // justify-content: center;
            margin-left: 20px;
            align-items: center;
            height: 35px;
            position: relative;

            cursor: pointer;
            span {
              color: white;
            }
            span:nth-of-type(1) {
              max-width: 200px; //也可以设置最大宽度
              overflow: hidden; //溢出隐藏
              white-space: nowrap; // 强制一行显示
              text-overflow: ellipsis; // 显示。。。省略号
            }
            .close-icon {
              color: red;
              position: absolute;
              right: 10px;
            }

            .edit-icon {
              position: absolute;
              right: 25px;
              margin-right: 10px;
            }

            .position-icon {
              position: absolute;
              right: 35px;
              margin-right: 30px;
            }
            &.active {
              span {
                color: #00d3e9;
              }
              .close-icon {
                color: red;
                position: absolute;
                right: 10px;
              }
              .edit-icon {
                position: absolute;
                right: 25px;
              }
              .position-icon {
                position: absolute;
                right: 35px;
              }
            }
          }
        }
      }
      .header-select {
        width: 200px;
        margin-bottom: 20px;
      }
    }
    .legend-rainFlow {
      position: absolute;
      background: rgba(255, 255, 255, 0.7);
      bottom: 220px;
      width: 240px;
      height: 150px;
      margin-left: 20px;
      border: #169bd5 2px solid;
      padding: 0 10px;
      box-sizing: border-box;
      border-radius: 5px;
      :deep(.el-radio-group) {
        margin-top: 15px;
        margin-left: 20px;
        .el-radio__input.is-checked + .el-radio__label {
          color: #409eff !important;
        }
        .el-radio {
          color: black;
          .el-radio__input {
            .el-radio__inner {
              width: 14px;
              height: 14px;
              opacity: 0.64;
              // background: #092455;
              background: #ffffff;
              border: 1px solid grey;
              &::after {
                width: 10px;
                height: 10px;
                background: linear-gradient(0deg, #00c0ff 0%, #2dfffe 97%);
              }
            }
            .is-checked {
              .el-checkbox__label {
                font-size: 14px;
                font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                font-weight: 400;
                text-align: left;
                color: #409eff !important;
              }
            }
          }
          // .el-checkbox__label {
          //   font-size: 14px;
          //   font-family: Source Han Sans CN, Source Han Sans CN-Regular;
          //   font-weight: 400;
          //   text-align: left;
          //   color: #ffffff !important;
          // }
        }
      }
    }
    .legend-box {
      position: absolute;
      background: rgba(255, 255, 255, 0.7);
      bottom: 20px;
      width: 340px;
      height: 190px;
      margin-left: 20px;
      border: #169bd5 2px solid;
      padding: 0 10px;
      box-sizing: border-box;
      border-radius: 5px;
      .col-height {
        display: flex;
        align-items: center;
        height: 30px;
        span {
          color: #409eff;
        }
        .span-block {
          width: 15px;
          height: 15px;
          margin-right: 5px;
          border: 1px solid rgba(0, 0, 0, 0.088);
        }
        .span-res {
          width: 15px;
          height: 15px;
          border-radius: 50%;
          margin-right: 5px;
          border: 1px solid rgba(0, 0, 0, 0.088);
        }
        .value1 {
          background-color: rgb(127, 1, 64);
        }
        .value2 {
          background-color: rgb(249, 1, 249);
        }
        .value3 {
          background-color: rgb(0, 0, 253);
        }
        .value4 {
          background-color: rgb(98, 183, 255);
        }
        .value5 {
          background-color: rgb(62, 184, 62);
        }
        .value6 {
          background-color: rgb(167, 240, 143);
        }
        .value7 {
          background-color: rgb(174, 174, 174);
        }
        .wrong-cfg {
          background-color: #9eada1;
        }
        .not-cfg {
          background-color: #fafbf1aa;
        }
        .aldy-cfg {
          background-color: #18f27b;
        }
        .is-cfg {
          background-color: #1a8e17;
        }
      }
      :deep(.el-tabs) {
        .el-tabs__header {
          margin-bottom: 5px;
        }
      }
      .legend-item {
        margin-left: 20px;
      }
    }
  }
}
.scheme-box {
  display: flex;
  // justify-content: center;
  // align-items: center;
}
</style>
